<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.5, maximum-scale=2.0">
    <title>伯乐智能HR - 对话驱动工作台</title>
    
    <!-- 图标字体 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- Chart.js for data visualization -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <!-- 引入markdown渲染库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script>
    
    <!-- SortableJS for drag & drop -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="/styles/living_workspace.css">
    <!-- 布局修复补丁 -->
    <link rel="stylesheet" href="/styles/layout_fixes.css">
</head>
<body>
    <div id="app" class="living-workspace">
        <!-- 顶部导航栏 -->
        <header class="workspace-header">
            <div class="header-left">
                <h1 class="title">
                    <i class="fas fa-user-tie brand-icon"></i>
                    伯乐智能HR
                    <span class="subtitle">Living Workspace</span>
                </h1>
            </div>
            <div class="header-right">
                <div class="header-controls">
                    <button class="btn btn-icon" id="themeToggle" title="切换主题">
                        <i class="fas fa-moon"></i>
                    </button>
                    <button class="btn btn-icon" id="refreshBtn" title="刷新数据">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                    <button class="btn btn-icon" id="settingsBtn" title="设置">
                        <i class="fas fa-cog"></i>
                    </button>
                </div>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 左侧：候选人工作台 -->
            <aside class="candidate-workbench" id="candidateWorkbench">
                <!-- 岗位需求卡片 -->
                <div class="job-requirement-card" id="jobRequirementCard" style="display: none;">
                    <div class="job-header">
                        <div class="job-icon">
                            <i class="fas fa-briefcase"></i>
                        </div>
                        <div class="job-info">
                            <h4 class="job-title" id="jobTitle">加载中...</h4>
                            <p class="job-company" id="jobCompany">-</p>
                        </div>
                        <div class="job-status">
                            <span class="status-badge urgent" id="jobStatus">急招</span>
                        </div>
                    </div>
                    
                    <div class="job-details">
                        <div class="job-meta">
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span id="jobLocation">-</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-dollar-sign"></i>
                                <span id="jobSalary">面议</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-clock"></i>
                                <span id="jobExperience">不限</span>
                            </div>
                        </div>
                        
                        <div class="required-skills">
                            <h5>核心技能要求</h5>
                            <div class="skills-tags" id="requiredSkills">
                                <span class="skill-tag loading">加载中...</span>
                            </div>
                        </div>
                        
                        <div class="recruitment-stats">
                            <div class="stat-item">
                                <span class="stat-number" id="totalResumes">-</span>
                                <span class="stat-label">总简历</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" id="qualifiedCandidates">-</span>
                                <span class="stat-label">合格候选人</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" id="pythonSpecialists">-</span>
                                <span class="stat-label">Python专家</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="workbench-header">
                    <div class="workbench-title">
                        <h3><i class="fas fa-users"></i> 候选人工作台</h3>
                        <button class="btn btn-sm" id="collapseWorkbench">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                    </div>
                    <div class="workbench-controls">
                        <button class="btn btn-sm btn-primary" id="showAllCandidatesBtn" title="显示所有候选人">
                            <i class="fas fa-users"></i>
                            查看所有候选人
                        </button>
                        <select class="filter-select" id="statusFilter">
                            <option value="all">全部状态</option>
                            <option value="active">活跃</option>
                            <option value="interviewing">面试中</option>
                            <option value="pending">待处理</option>
                        </select>
                        <select class="sort-select" id="sortSelect">
                            <option value="match_score">按匹配度</option>
                            <option value="name">按姓名</option>
                            <option value="last_updated">按更新时间</option>
                        </select>
                    </div>
                </div>

                <div class="workbench-content">
                    <!-- 候选人列表 -->
                    <div class="candidate-list" id="candidateList">
                        <!-- 空状态 -->
                        <div class="empty-state" id="emptyState">
                            <div class="empty-icon">
                                <i class="fas fa-search"></i>
                            </div>
                            <h4>开始对话寻找候选人</h4>
                            <p>在右侧对话区输入需求，例如："找几个Python工程师"</p>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- 中心：对话核心区域 -->
            <section class="conversation-core">
                <div class="chat-container">
                    <!-- 聊天记录区 -->
                    <div class="chat-history" id="chatHistory">
                        <!-- 欢迎消息 -->
                        <div class="welcome-message" id="welcomeMessage">
                            <div class="welcome-avatar">
                                <i class="fas fa-user-tie"></i>
                            </div>
                            <div class="welcome-content">
                                <h3>您好！我是伯乐智能HR助手</h3>
                                <p>我可以帮您完成以下任务：</p>
                                <ul class="feature-list">
                                    <li><i class="fas fa-search"></i>智能搜索和筛选候选人</li>
                                    <li><i class="fas fa-brain"></i>深度分析候选人匹配度</li>
                                    <li><i class="fas fa-question-circle"></i>生成个性化面试题</li>
                                    <li><i class="fas fa-chart-line"></i>生成洞察报告</li>
                                </ul>
                                <p class="start-hint">试试说："找几个积极主动的Python工程师"</p>
                            </div>
                        </div>
                        
                        <!-- 消息将在这里动态插入 -->
                    </div>

                    <!-- 实时状态时间线 -->
                    <div class="agent-status-timeline" id="agentStatusTimeline" style="display: none;">
                        <div class="timeline-header">
                            <i class="fas fa-cogs"></i>
                            <span>多智能体处理状态</span>
                            <button class="close-timeline-btn" id="closeTimelineBtn">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="timeline-content" id="timelineContent">
                            <!-- 时间线项目将在这里动态插入 -->
                        </div>
                        <div class="timeline-progress">
                            <div class="progress-bar" id="timelineProgress"></div>
                        </div>
                    </div>

                    <!-- 输入区域 -->
                    <div class="chat-input-area">
                        <!-- 快捷建议 -->
                        <div class="quick-suggestions" id="quickSuggestions">
                            <button class="suggestion-btn">找几个Python工程师</button>
                            <button class="suggestion-btn">分析最匹配的候选人</button>
                            <button class="suggestion-btn">生成面试题</button>
                            <button class="suggestion-btn">筛选5年以上经验的候选人</button>
                        </div>
                        
                        <div class="input-wrapper">
                            <textarea 
                                class="chat-input" 
                                id="chatInput" 
                                placeholder="输入您的需求，例如：找几个Python工程师..."
                                rows="1"></textarea>
                            <button class="send-btn" id="sendBtn">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 右侧：深度信息面板 -->
            <aside class="deep-info-panel" id="deepInfoPanel">
                <div class="panel-header">
                    <div class="panel-title">
                        <h3 id="panelTitle">
                            <i class="fas fa-user-circle"></i>
                            候选人详情
                        </h3>
                        <button class="btn btn-sm" id="collapsePanel">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>

                <div class="panel-content">
                    <!-- 未选择状态 -->
                    <div class="no-selection" id="noSelection">
                        <div class="no-selection-icon">
                            <i class="fas fa-hand-pointer"></i>
                        </div>
                        <h4>请选择候选人</h4>
                        <p>点击左侧候选人卡片查看详细信息</p>
                    </div>

                    <!-- 候选人详情内容 -->
                    <div class="candidate-details" id="candidateDetails" style="display: none;">
                        <!-- Tab导航 -->
                        <div class="tabs-nav">
                            <button class="tab-btn active" data-tab="ai-analysis">
                                <i class="fas fa-brain"></i>
                                AI分析
                            </button>
                            <button class="tab-btn" data-tab="raw-resume">
                                <i class="fas fa-file-alt"></i>
                                原始简历
                            </button>
                            <button class="tab-btn" data-tab="interactions">
                                <i class="fas fa-comments"></i>
                                交互笔记
                            </button>
                        </div>

                        <!-- Tab内容 -->
                        <div class="tab-content">
                            <!-- AI分析Tab -->
                            <div class="tab-pane active" id="ai-analysis">
                                <div class="analysis-section">
                                    <h4>综合评分</h4>
                                    <div class="score-display" id="scoreDisplay">
                                        <div class="score-circle">
                                            <canvas id="scoreChart" width="100" height="100"></canvas>
                                            <div class="score-text" id="scoreText">--</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="analysis-section">
                                    <h4>优势分析</h4>
                                    <div class="pros-content" id="prosContent">
                                        <p class="analysis-placeholder">选择候选人后查看AI分析</p>
                                    </div>
                                </div>

                                <div class="analysis-section">
                                    <h4>潜在风险</h4>
                                    <div class="cons-content" id="consContent">
                                        <p class="analysis-placeholder">选择候选人后查看AI分析</p>
                                    </div>
                                </div>

                                <div class="analysis-actions">
                                    <button class="btn btn-primary" id="regenerateAnalysis">
                                        <i class="fas fa-sync-alt"></i>
                                        重新分析
                                    </button>
                                    <button class="btn btn-secondary" id="generateQuestions">
                                        <i class="fas fa-question-circle"></i>
                                        生成面试题
                                    </button>
                                </div>
                            </div>

                            <!-- 原始简历Tab -->
                            <div class="tab-pane" id="raw-resume">
                                <div class="resume-header">
                                    <h4>简历内容</h4>
                                    <div class="resume-actions">
                                        <input type="text" class="search-input" id="resumeSearch" placeholder="搜索简历内容...">
                                        <button class="btn btn-sm" id="downloadResume">
                                            <i class="fas fa-download"></i>
                                            下载
                                        </button>
                                    </div>
                                </div>
                                <div class="resume-content" id="resumeContent">
                                    <p class="resume-placeholder">选择候选人后查看简历详情</p>
                                </div>
                            </div>

                            <!-- 交互笔记Tab -->
                            <div class="tab-pane" id="interactions">
                                <div class="notes-section">
                                    <h4>添加笔记</h4>
                                    <div class="note-input-area">
                                        <textarea 
                                            class="note-input" 
                                            id="noteInput" 
                                            placeholder="添加关于此候选人的笔记..."></textarea>
                                        <button class="btn btn-primary" id="addNoteBtn">
                                            <i class="fas fa-plus"></i>
                                            添加笔记
                                        </button>
                                    </div>
                                </div>

                                <div class="timeline-section">
                                    <h4>交互时间线</h4>
                                    <div class="timeline" id="timeline">
                                        <p class="timeline-placeholder">暂无交互记录</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        </main>
    </div>

    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="loading-content">
            <div class="loading-spinner">
                <i class="fas fa-cog fa-spin"></i>
            </div>
            <div class="loading-text" id="loadingText">正在处理...</div>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div class="modal" id="settingsModal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>系统设置</h3>
                <button class="modal-close" id="closeSettings">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="setting-section">
                    <h4>界面设置</h4>
                    <div class="setting-item">
                        <label>主题模式</label>
                        <select id="themeSelect">
                            <option value="light">亮色主题</option>
                            <option value="dark">暗色主题</option>
                        </select>
                    </div>
                    <div class="setting-item">
                        <label>自动刷新</label>
                        <input type="checkbox" id="autoRefresh" checked>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 端口修复脚本 (最先加载) -->
    <script src="/port_fix.js"></script>
    <!-- 布局修复脚本 -->
    <script src="/scripts/layout_fixes.js"></script>
    <!-- 候选人卡片显示修复脚本 -->
    <script src="/scripts/candidate_card_fix.js"></script>
    <!-- 主应用脚本 -->
    <script src="/scripts/living_workspace.js"></script>
    <!-- Living Workspace 修复补丁 -->
    <script src="/scripts/living_workspace_fixes.js"></script>
</body>
</html>